import React, { Fragment } from 'react';
import { Card, Content, Select } from 'react-fule-ui';
import './index.scss';

export default function FuleSelect() {
  const getOnChange = (data) => {
    console.log(data);
  };
  return (
    <Fragment>
      <Content>
        <Content.Header>输入框</Content.Header>
        <Content.Body>
          <Card>
            <Card.Header>基础用法</Card.Header>
            <Card.Body>
              <div className="dome-select">
                <Select
                  defaultValue="123"
                  // style={{ opacity: 0.6 }}
                  className="abc"
                  overlayClassName="abc"
                  // overlayStyle={{ opacity: 0.6 }}
                  // open={true}
                  onChange={(data) => getOnChange(data)}
                >
                  <Select.Item>12</Select.Item>
                  <Select.Item>123</Select.Item>
                  <Select.Item>12223</Select.Item>
                  <Select.Item>122231</Select.Item>
                  <Select.Item>122232</Select.Item>
                  <Select.Item>122233</Select.Item>
                  <Select.Item>122234</Select.Item>
                  <Select.Item>122236</Select.Item>
                  <Select.Item>122237</Select.Item>
                  <Select.Item>12223sd3</Select.Item>
                  <Select.Item>12223sd4</Select.Item>
                  <Select.Item>1222sd36</Select.Item>
                  <Select.Item>122sd237</Select.Item>
                </Select>
              </div>
              <div className="dome-select">
                <Select>
                  <Select.Item>12</Select.Item>
                  <Select.Item>123</Select.Item>
                  <Select.Item>12223</Select.Item>
                </Select>
              </div>
            </Card.Body>
          </Card>
        </Content.Body>
      </Content>
    </Fragment>
  );
}
